<template>
  <div>
    <div slot="tip" class="el-upload__tip" v-if="fileList.length>0 && tip">{{tip}}</div>
    <div style="margin-top: 16px; width: 60%; height: 60px; background-color: #f4f7fe; border-radius: 4px;"
         v-for="(item,index) in fileList" :key="index">
      <div style="display: flex; justify-content: space-between; align-items: center; height: 100%;">
        <div style="  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;width: calc(100% - 88px - 4em)" :title="item.name">
          <img src="/res/file_icon.svg" style="width: 32px;" alt=""/>
          <span>{{ item.name }}</span>
        </div>
        <div>
          <a style="margin-right: 40px;" :href="item.url">预览</a>
          <a style="margin-right: 48px;" :href="item.url" :download="item.name">下载</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      authorization:'Bearer '+elm.info.token
    }
  },
  mounted() {
    this.getFileList();
  },
  model: {
  },
  props: {
    rel_id: {
      type: String
    },
    module_name: {
      type: String,
      default: function () {
        return "";
      }
    },
    tip: {
      type: String,
      default: function () {
        return "相关附件";
      }
    },

  },
  watch: {
    module_name: {
      handler(value) {
        this.getFileList();
      }
    },
    rel_id: {
      handler(value) {
        this.getFileList();
      }
    }
  },
  methods: {
    async getFileList() {
      this.fileList = [];
      if(this.rel_id==null || this.module_name==null){
        return;
      }
      var res = await elm.post("/system/login/io/GetData", {module_name: this.module_name, rel_id: this.rel_id });
      for (var item of res) {
        this.fileList.push({ url: "/api/system/login/io/Viewer/" + item.id+"?token="+elm.info.token, name: item.origin_name, id: item.id});
      }
    },
  }
}
</script>

<style scoped>
.elm-upload-view .el-upload
{
  display: none;
}
span{
  font-size: 12pt;
  font-weight: normal;
  color: #808080;
  line-height: 60px;
}
img{
  vertical-align: middle;
  margin-left:16px;
  margin-right: 20px;
}
a{
  font-size: 12pt;
  color: #185dff;
}
</style>